<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!--  CDN 链接 引入方法  -->
    <!--  jQuery 文件  -->
    <script
            src="{{ url_for('static',filename='jquery/jquery.min.js',_external=True) }}"
    >
        //jQuery
    </script>
    <!--  Bootstrap 的 CSS 样式文件  -->
    <!--    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">-->
    <link
            rel="stylesheet"
            href="{{ url_for('static',filename='bootstrap/bootstrap.min.css',_external=True) }}"
    />
    <!--  Bootstrap 的 JS 文件 (动画效果需要jQuery)  -->
    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script>-->
    <script
            src="{{ url_for('static',filename='bootstrap/bootstrap.min.js',_external=True) }}"
    >
        // bootstrap
    </script>
    <!--  Vue 文件  -->
    <!--    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>-->
    <script src="{{ url_for('static',filename='vue/vue.min.js',_external=True) }}"></script>
    <!--  以下为 css样式书写区  -->
    <style></style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button
                    type="button"
                    class="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false"
            >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">二手房房源分析</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">1111<span class="sr-only">(current)</span></a>
                </li>
                <li><a href="#">暂定一</a></li>
                <li class="dropdown">
                    <a
                            href="#"
                            class="dropdown-toggle"
                            data-toggle="dropdown"
                            role="button"
                            aria-haspopup="true"
                            aria-expanded="false"
                    >更新房源<span class="caret"></span
                    ></a>
                    <ul class="dropdown-menu">
                        <!--                        <li><a href="#" id="update_house_data" >更新CSV资源</a></li>-->
                        <li>
                            Update CSV
                            <input id="update_house_data_1" type="button" value="1"/>
                        </li>
                        <li>
                            Update MySQL
                            <input id="update_house_data_2" type="button" value="2"/>
                        </li>
                        <li>
                            Update All
                            <input id="update_house_data_3" type="button" value="3"/>
                        </li>
                        <!--                        <li><a href="#">更新数据库资源</a></li>-->
                        <!--                        <li><a href="#">更新全部资源</a></li>-->
                        <!--                        <li role="separator" class="divider"></li>-->
                        <!--                        <li><a href="#">Separated link</a></li>-->
                        <!--                        <li role="separator" class="divider"></li>-->
                        <!--                        <li><a href="#">One more separated link</a></li>-->
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search"/>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">右侧暂定一</a></li>
                <li><a href="#" id="logout">注销登录</a></li>
                <!--                <li class="dropdown">-->
                <!--                    <a href="#" class="dropdown-toggle"  role="button" aria-haspopup="true"-->
                <!--                       aria-expanded="false" id="logout">注销登录<span class="caret"></span></a>-->

                <!--                    <ul class="dropdown-menu">-->
                <!--                        <li><a href="#">注册</a></li>-->
                <!--                        <li><a href="#">登陆</a></li>-->
                <!--            <li><a href="#">Something else here</a></li>-->
                <!--            <li role="separator" class="divider"></li>-->
                <!--            <li><a href="#">Separated link</a></li>-->
                <!--                    </ul>-->
                <!--                </li>-->
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-1">
            <div class="list-group">
                <a href="#" class="list-group-item active"> 房源信息总览 </a>
                <a href="#" class="list-group-item">房源信息分析</a>
                <a href="#" class="list-group-item">房源分析分析</a>
                <a href="#" class="list-group-item">房源信息分析</a>
                <a href="#" class="list-group-item">房源信息分析</a>
            </div>
        </div>
        <div class="col-md-11">
            <table class="table">
                <thead>
                <tr class="success">
                    <th>ID</th>
                    <th class="text-center" id="house_name_button">house_name</th>
                    <th class="text-center">house_detail_url</th>
                    <th class="text-center">house_detail</th>
                    <th class="text-center">house_area</th>
                    <th class="text-center">house_create</th>
                    <th class="text-center">house_cover</th>
                    <th class="text-center">house_price_total</th>
                    <th class="text-center">house_pre_price</th>
                    <th class="text-center">house_location</th>
                    <th class="text-center">house_tag</th>
                    <th class="text-center">编辑</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody>
                {%for data in house_data%}
                <tr>
                    <td class="text-center">{{data.id}}</td>
                    <td class="text-center">{{data.house_name}}</td>
                    <td class="text-center">
                        <a href="{{data.house_detail_url}}">跳转详情链接</a>
                    </td>
                    <td class="text-center">{{data.house_detail}}</td>
                    <td class="text-center">{{data.house_area}}</td>
                    <td class="text-center">{{data.house_create}}</td>
                    <td class="text-center">
                        <img
                                src="{{data.house_cover}}"
                                alt="图片加载失败"
                                style="width: 40px; height: 40px"
                        />
                    </td>
                    <td class="text-center">{{data.house_price_total}}</td>
                    <td class="text-center">{{data.house_pre_price}}</td>
                    <td class="text-center">{{data.house_location}}</td>
                    <td class="text-center">{{data.house_tag}}</td>

                    <td>
                        <button class="btn btn-success">编辑</button>
                    </td>
                    <td>
                        <button class="btn btn-warning" id="del_house_data" value="{{data.id}}">
                            删除
                        </button>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!--{{house_data}}-->
</body>
<script>
    $("#logout").click(function () {
        $.ajax({
            url: "/user/logout",
            method: "get",
            success: function (result) {
                window.location.href = result.url;
            },
        });
    });

    $("#del_house_data").click(function () {
        let id = $(this).val();
        console.log(id);
        $.ajax({
            url: "/house/edit/del",
            method: "get",
            data: {'house_id': id},
            success: function (result) {
                if (result.code === 200) {
                    alert(result.message);
                    window.location.reload();
                } else {
                    alert(result.message);
                }
            },
        });
    })


    $("#update_house_data_1").click(function () {
        let db = $(this).val();
        console.log(db);
        console.log("db");
        $.ajax({
            url: "/house/update_data",
            method: "get",
            success: function (result) {
                if (result.code === 200) {
                    window.location.reload();
                }
            },
        });
    });

    // 根据房屋名字进行信息的过滤排序
    $("#house_name_button").click(function () {
        $.ajax({
            url: "/house/house_data",
            method: "get",
            data: {"condition": "house_name"},
            success: function (result) {
                if (result.code === 200) {
                    window.location.reload();
                }
            },
        })
    });

    // // 删除指定房子信息
    // $("#del_house_data").click(function () {
    //     let house_data_id = $(this).val();
    //
    //     console.log(house_data_id);
    // });
</script>
</html>
